﻿@model ProductAskQuestionSimpleModel
<input value="@Model.Id" type="hidden" id="AskQuestionProductId" ref="AskQuestionProductId" name="AskQuestionProductId"/>
<div id="contact-us-product">
    <validation-observer ref="contact" tag="div">
        <fieldset class="form-group">
            <validation-provider tag="div" rules="required|email" name="AskQuestionEmail" v-slot="{ errors, classes }">
                <label asp-for="AskQuestionEmail" class="col-form-label">@Loc["Products.AskQuestion.Email"]:</label>
                <input asp-for="AskQuestionEmail" ref="AskQuestionEmail" v-model="askquestion.AskQuestionEmail" placeholder="@Loc["Products.AskQuestion.Email.Hint"]" v-bind:class="[classes , 'form-control ask-question-email']"
                       data-val-email=@Loc["Common.WrongEmail"] data-val-required=@Loc["Products.AskQuestion.Email.Required"]/>
                <span class="field-validation-error">{{ errors[0] }}</span>
                <span asp-validation-for="AskQuestionEmail"></span>
            </validation-provider>
        </fieldset>
        <fieldset class="form-group">
            <validation-provider tag="div" rules="required" name="AskQuestionFullName" v-slot="{ errors, classes }">
                <label asp-for="AskQuestionFullName" class="col-form-label">@Loc["Products.AskQuestion.FullName"]:</label>
                <input asp-for="AskQuestionFullName" ref="AskQuestionFullName" v-model="askquestion.AskQuestionFullName" placeholder="@Loc["Products.AskQuestion.FullName.Hint"]" v-bind:class="[classes , 'form-control ask-question-fullname']"
                       data-val-required=@Loc["Products.AskQuestion.FullName.Required"]/>
                <span class="field-validation-error">{{ errors[0] }}</span>
                <span asp-validation-for="AskQuestionFullName"></span>
            </validation-provider>
        </fieldset>
        <fieldset class="form-group">
            <label asp-for="AskQuestionPhone" class="col-form-label">@Loc["Products.AskQuestion.Phone"]:</label>
            <input asp-for="AskQuestionPhone" ref="AskQuestionPhone" placeholder="@Loc["Products.AskQuestion.Phone.Hint"]" class="form-control ask-question-phone"/>
        </fieldset>
        <fieldset class="form-group">
            <validation-provider tag="div" rules="required" name="AskQuestionMessage" v-slot="{ errors, classes }">
                <label asp-for="AskQuestionMessage" class="col-form-label">@Loc["Products.AskQuestion.Message"]:</label>
                <textarea asp-for="AskQuestionMessage" ref="AskQuestionMessage" v-model="askquestion.AskQuestionMessage" placeholder="@Loc["Products.AskQuestion.Message.Hint"]" v-bind:class="[classes , 'form-control ask-question-message']" rows="4" data-val-required=@Loc["Products.AskQuestion.Message.Required"] ></textarea>
                <span class="field-validation-error">{{ errors[0] }}</span>
                <span asp-validation-for="AskQuestionMessage"></span>
            </validation-provider>
        </fieldset>
        @if (Model.DisplayCaptcha)
        {
            <div id="captcha-place"></div>
        }

        <div class="buttons generalMarginSupporter pt-1 pb-1">
            <input type="submit" name="send-email" class="btn btn-info send-ask-question-button"
                   value="@Loc["Products.AskQuestion.Button"]" @@click="askquestion.sendContactUsForm('@Url.RouteUrl("AskQuestionOnProduct")')"/>
            <span class="sr-only">@Loc["Products.AskQuestion.Button"]</span>
        </div>
    </validation-observer>
    <script asp-location="Footer" asp-order="300">
                var askquestion = new Vue({
                    data: () => ({
                        @{
                            <text>
                                AskQuestionEmail: '@Html.Raw(Model.AskQuestionEmail)',
                                AskQuestionFullName: '@Html.Raw(Model.AskQuestionFullName)',
                                AskQuestionMessage: '@Html.Raw(Model.AskQuestionMessage)',
                            </text>
                        }
                    }),
                    methods: {
                        async sendContactUsForm(urladd) {
                            var bodyFormData = new FormData();
                            bodyFormData.append('AskQuestionEmail', vm.$refs.AskQuestionEmail.value);
                            bodyFormData.append('AskQuestionFullName', vm.$refs.AskQuestionFullName.value);
                            bodyFormData.append('AskQuestionPhone', vm.$refs.AskQuestionPhone.value);
                            bodyFormData.append('AskQuestionMessage', vm.$refs.AskQuestionMessage.value);
                            bodyFormData.append('Id', vm.$refs.AskQuestionProductId.value);
                            bodyFormData.append('__RequestVerificationToken', document.querySelector('.product-details-page input[name=__RequestVerificationToken]').value);
                            if (document.querySelector("[id^='g-recaptcha-response']")) {
                                bodyFormData.append('g-recaptcha-response-value', document.querySelector("[id^='g-recaptcha-response']").value);
                            }
                            if (await vm.$refs.contact.validate())
                            {
                                axios({
                                    url: urladd,
                                    data: bodyFormData,
                                    method: 'post',
                                    headers: { 'Content-Type': 'multipart/form-data' }
                                }).then(function (response) {
                                    if (response.data.success) {
                                        document.querySelector('.product-standard #contact-us-product').style.display = "none";
                                        document.querySelector('.product-standard .product-contact-error').style.display = "none";
                                        document.querySelector('.product-standard .product-contact-send').innerHTML = response.data.message;
                                        document.querySelector('.product-standard .product-contact-send').style.display = "block";
                                    }
                                    else {
                                        document.querySelector('.product-standard .product-contact-error').innerHTML = response.data.message;
                                        document.querySelector('.product-standard .product-contact-error').style.display = "block";
                                    }
                                }).catch(function (error) {
                                    alert(error);
                                });
                            }
                        },
                        @if (Model.DisplayCaptcha)
                        {
                            <text>
                                    getCaptcha() {
                                        var html = document.getElementById("captcha-box");
                                        document.getElementById("captcha-place").prepend(html);
                                    }
                            </text>
                        }
                    }
                });
    </script>


</div>

<div class="alert alert-danger product-contact-error" style="display: none;">
</div>

<div class="alert alert-success product-contact-send" style="display: none;">
</div>